/*
 * Created: 2022-08-25 13:11:30
 * Author : 涛涛涛
 */

import React, { useContext } from 'react';
import { View, Text, ScrollView, ScrollViewProps } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { HomeContext } from '@/pages/Home/HomeContext';
import ProductItem from './ProductItem/ProductItem';
type LocalCompProps = ScrollViewProps & ICompProps;
export interface IProps extends LocalCompProps {}
ProductList.defaultProps = {} as Partial<IProps>;
function ProductList(props: IProps) {
    const { className, style, children, ...others } = props;
    const localClassName = useClassName('ProductList', className);
    const { homeExhibitionState } = useContext(HomeContext);
    // 滚动的高度,还是需要计算出来才行.
    return (
        <RootView {...others} className={localClassName} style={style}>
            {homeExhibitionState.productList.map((product) => (
                <ProductItem
                    {...product}
                    key={product.id}
                    onClick={() => homeExhibitionState.gotoPageDetail(product.id)}
                />
            ))}
        </RootView>
    );
}
export default React.memo(ProductList);
const RootView = styled(View)`
    &.ProductList {
        .ProductItem + .ProductItem {
            margin-top: 80px;
        }
    }
`;
